@import "./variables";

//  全局样式
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
    outline: none;
}

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
    height: 100vh;
}

a {
    color: #343440;
    text-decoration: none;
}

.clearfix {
    &::after {
        content: "";
        display: table;
        height: 0;
        line-height: 0;
        visibility: hidden;
        clear: both;
    }
}

//浮动
.float-r {
    float: right;
}

//浮动
.float-l {
    float: left;
}

// 字体加粗
.fw-b {
    font-weight: bold;
}

//文章一行显示，多余省略号显示
.title-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-color-black {
    background-color: rgba(19, 25, 47, 0.6);
}

.bg-color-blue {
    background-color: #1a5cd7;
}

.colorBlack {
    color: #272727 !important;

    &:hover {
        color: #272727 !important;
    }
}

.colorGrass {
    color: #33cea0;

    &:hover {
        color: #33cea0 !important;
    }
}

.colorRed {
    color: #ff5722;

    &:hover {
        color: #ff5722 !important;
    }
}

.colorText {
    color: #d3d6dd !important;

    &:hover {
        color: #d3d6dd !important;
    }
}

.colorBlue {
    color: #257dff !important;

    &:hover {
        color: #257dff !important;
    }
}

//颜色
@each $colorkey, $color in $colors {
    .text-#{$colorkey} {
        color: $color;
    }

    .bg-#{$colorkey} {
        background-color: $color;
    }
}

//对齐
@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var !important;
    }
}

//flex
@each $key, $value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}

@each $key, $value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}

//字体
@each $fontkey, $fontvalue in $font-sizes {
    .fs-#{$fontkey} {
        font-size: $fontvalue * $base-font-size;
    }
}

//.mt-1 => margin top
//spacing

@each $typekey, $type in $spacing-types {
    //.m-1
    @each $sizekey, $size in $spacing-sizes {
        .#{$typekey}-#{$sizekey} {
            #{$type}: $size * $spacing-base-size;
        }
    }

    //.mx-1
    @each $sizekey, $size in $spacing-sizes {
        .#{$typekey}x-#{$sizekey} {
            #{$type}-left: $size * $spacing-base-size;
            #{$type}-right: $size * $spacing-base-size;
        }

        .#{$typekey}y-#{$sizekey} {
            #{$type}-top: $size * $spacing-base-size;
            #{$type}-bottom: $size * $spacing-base-size;
        }
    }

    //.mt-1
    @each $directionkey, $direction in $spacing-directions {
        @each $sizekey, $size in $spacing-sizes {
            .#{$typekey}#{$directionkey}-#{$sizekey} {
                #{$type}-#{$direction}: $size * $spacing-base-size;
            }
        }
    }

    .#{$typekey} {
        #{$type}: 0;
    }
}

.tl{ text-align: left; }
.tc{ text-align: center; }
.tr{ text-align: right; }
.pr{ position: relative; }
.pa{ position: absolute; }
.pf{ position: fixed; }
.fl{ float: left; }
.fr{ float: right; }
.block{ display: block; }
.hidden{ display: none; }
.displayTable{ display: table; }
.displayTableCell{ display: table-cell; }
.none{ display: none; }
.z1{z-index: 1;}
.z2{z-index: 2;}
.z3{z-index: 3;}
.z9{z-index: 9;}
.z99{z-index: 99;}
.imgVertical{height: 100%; width: 0; display: inline-block; vertical-align: middle;}/* 图片水平垂直居中 */
/*== 鼠标状态==*/
.cp{cursor: pointer; }
.cd{cursor: default;}
/*== 字号 ==*/
.f12{ font-size: 12px; }
.f13{ font-size: 13px; }
.f14{ font-size: 14px; }
.f15{ font-size: 15px; }
.f16{ font-size: 16px; }
.f18{ font-size: 18px; }
.f20{ font-size: 20px; }
.f22{ font-size: 22px; }
.f24{ font-size: 24px; }
.f26{ font-size: 26px; }
.f30{font-size: 30px;}
.f32{font-size: 32px;}
.f34{font-size: 34px;}
.f36{ font-size: 36px; }
.f40{ font-size: 40px; }
.f48{font-size: 48px;}
.f60{font-size: 60px;}
.fb{ font-weight: bold; }
.fn{ font-weight: normal; }
.l12 { line-height: 12px; }
.l16 { line-height: 16px; }
.l18 { line-height: 18px; }
.l20 { line-height: 20px; }
.l24 { line-height: 24px; }
.l26 { line-height: 26px; }
.l30 { line-height: 30px; }
.l34 { line-height: 34px; }
.l36 { line-height: 36px; }
.l40 { line-height: 40px; }
.l48 { line-height: 48px; }
.l60 { line-height: 60px; }
.l_1 { line-height: 1.0; }
.l_15 { line-height: 1.5; }
.l_20 { line-height: 2.0; }
/*== 字色 ==*/
.text-white{ color: #fff; }
.text-gray3{ color: #333; }
.text-gray6{ color: #666; }
.text-gray9{ color: #999; }
.text-gray12{ color: #D3D3D3; }
.text-blue{ color: #1371E6; }
.text-green{ color: #225e22; }
.text-blue3{ color: #4193ef; }
.text-blue6{ color: #78b3f8; }
.text-blue9{ color: #7cd0f6; }
.text-blue12{ color: #97e4fc; }
.text-red{ color: #EF205A; }
.text-orange{color: #f28b11;}
/*== 宽度 ==*/
.w_10{width: 10%}
.w_15{width: 15%}
.w_19{width: 19.2%}
.w_20{width: 20%}
.w_25{width: 25%}
.w_30{width: 30%}
.w_35{width: 35%}
.w_40{width: 40%}
.w_45{width: 45%}
.w_50{width: 50%}
.w_55{width: 55%}
.w_60{width: 60%}
.w_65{width: 65%}
.w_70{width: 70%}
.w_75{width: 75%}
.w_80{width: 80%}
.w_85{width: 85%}
.w_90{width: 90%}
.w_95{width: 95%}
.w_100{width: 100%;}
.w280{width: 280px;}
.w700{width: 700px;}
.h100 { height: 100%; }
/*== 背景色 ==*/
.bg-white{background-color: #fff;}
.bg-blank9{background-color: #262626;}
.bg_grey{background-color: #f2f3f7;}
.bg_grey9{background-color: #f6f6f6;}
.bg-blue{background-color: #0a69f3;}
.bg-blue9{background-color: #4889ec;}
/*== 圆角 ==*/
.br2{ border-radius: 2px; }
.br4{ border-radius: 4px; }
.br6{ border-radius: 6px; }
.br8{ border-radius: 8px; }
.br10{ border-radius: 10px; }
.br50{ border-radius: 50px; }
/*== 内外边距 ==*/
.m5{margin: 5px;}
.m10{margin: 10px;}
.m15{margin: 15px;}
.m20{margin: 20px;}
.m30{margin: 30px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt100{margin-top: 100px;}
.mt200{margin-top: 200px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb35{margin-bottom: 35px;}
.mb40{margin-bottom: 40px;}
.mb45{margin-bottom: 45px;}
.mb50{margin-bottom: 50px;}
.mb100{margin-bottom: 100px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.ml25{margin-left: 25px;}
.ml30{margin-left: 30px;}
.ml35{margin-left: 35px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.ml100{margin-left: 100px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr25{margin-right: 25px;}
.mr30{margin-right: 30px;}
.mr35{margin-right: 35px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}
.mr100{margin-right: 100px;}
.p20{ padding: 20px; }
.p5{padding: 5px;}
.p10{padding: 10px;}
.p15{padding: 15px;}
.p30{padding: 30px;}
.p40{padding: 40px;}
.p50{padding: 50px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 25px;}
.pt30{padding-top: 30px;}
.pt35{padding-top: 35px;}
.pt40{padding-top: 40px;}
.pt50{padding-top: 50px;}
.pt100{padding-top: 100px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pb25{padding-bottom: 25px;}
.pb30{padding-bottom: 30px;}
.pb35{padding-bottom: 35px;}
.pb40{padding-bottom: 40px;}
.pb50{padding-bottom: 50px;}
.pb100{padding-bottom: 100px;}
.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}
.pl25{padding-left: 25px;}
.pl30{padding-left: 30px;}
.pl35{padding-left: 35px;}
.pl40{padding-left: 40px;}
.pl45{padding-left: 45px;}
.pl50{padding-left: 50px;}
.pl100{padding-left: 100px;}
.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}
.pr25{padding-right: 25px;}
.pr30{padding-right: 30px;}
.pr35{padding-right: 35px;}
.pr40{padding-right: 40px;}
.pr50{padding-right: 50px;}
.pr80{padding-right: 80px;}
.pr100{padding-right: 100px;}
.over_hidden{overflow: hidden;}
/*=== 文本溢出隐藏 单行 ===*/
.text-over-el {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
/*=== 文本溢出隐藏 多行 ===*/
.text-over-el2{
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 2;
}
.text-over-el3{
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 3;
}
.text-over-el4{
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 4;
}
/*== 动画 ==*/
.trans{/* 过度动画 */
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.scale:hover{/* 鼠标划上放大效果 */
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}

.upward:hover{/* 鼠标划上上升效果 */
    -webkit-transform:translate(0,-10px);
    -moz-transform:translate(0,-10px);
    -ms-transform:translate(0,-10px);
    -o-transform:translate(0,-10px);
    transform:translate(0,-10px);
}

.fix_t {
    position: fixed;
    top: 0;
}

.fix_b {
    position: fixed;
    bottom: 0;
}

a {
    text-decoration: none
}

li {
    list-style: none;
}

.height_center {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.width_center {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.w_h_center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
}

.el-container {
    height: 100vh;
}

.block {
    float: right;
    padding: 20px 0 10px 0;
}
// 滚动条美化
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgb(150, 149, 149);
    background-color: #a8a8a8;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgb(150, 149, 149);
    border-radius: 5px;
    background-color: #f1f1f1;
}
